<template>
	<div class="c-p-panel">
		<div class="form">
			<Form ref="form" :model="params" :rules="rules" :label-width="80">
				<Form-item label="公告标题" style="width: 500px;" prop="title">
					<Input v-model="params.title" placeholder="请输入公告标题" size="large"></Input>
				</Form-item>

				<Form-item label="公告内容" style="width: 500px;" prop="content">
					<Input v-model="params.content" 
						type="textarea" 
						size="large"
						:autosize="{minRows: 5,maxRows: 5}" 
						placeholder="请输入公告内容">
					</Input>
				</Form-item>

				<Form-item label="公告类型" style="width: 300px;" prop="type">
					<Select v-model="params.type" size="large">
						<Option 
							v-for="(item, index) in initData.types" 
							:value="item.tid" 
							:key="index"
							v-text="item.value">
						</Option>
					</Select>
				</Form-item>
				
				
				<Form-item label="关联数据" style="width: 500px;" prop="webUrl" 
					v-if="params.type == 3">
					<Input v-model="params.webUrl" placeholder="请输入关联网页链接" size="large"></Input>
				</Form-item>
	
				<Form-item label="发布状态" style="width: 300px;" prop="status">
					<Select v-model="params.status" size="large">
						<Option 
							v-for="(item, index) in initData.status" 
							:value="item.id" 
							:key="index"
							v-text="item.value">
						</Option>
					</Select>
				</Form-item>
				
				<Form-item>
					<Row>
				        <Col span="12">
				        		<Button type="primary" 
				        			@click="handleSubmit('form')" 
				        			:loading="isShowLoading"
				        			long size="large">提交</Button>
				        </Col>
				        <Col span="12">
				        		<Button type="ghost" 
				        			@click="handleReset('form')" 
				        			style="margin-left: 20px"
				        			:disabled="isShowLoading"
				        			long size="large">重置</Button>
				        </Col>
				    </Row>
		        </Form-item>
			</Form>
		</div>
		<Spin fix size="large" v-if="isPageLoading">
            <Icon type="load-c" size=18 class="spin-icon-load"></Icon>
            <div>加载中...</div>
        </Spin>
	</div>
</template>

<script>
	import { formatDate } from '@/libs/date-util.js';
	
	import NoticeService from '@/services/NoticeService.js';
	var $noticeService = NoticeService();
	
	const $data = {
		isShowLoading: false,
		isPageLoading: false,
		params: {
			nid: null,
			title: null,
			type: 1,
			webUrl: null,
			content: null,
			status: 0
		},
		initData: {
			types: [{
				tid: 1,
				value: '普通公告'
			}, {
				tid: 3,
				value: 'H5公告'
			}],
			status: [{
				id: 0,
				value: '未发布'
			}, {
				id: 1,
				value: '发布'
			}]
		},
		rules: {
			title: [
                { required: true, type: 'string', message: '公告标题不能为空', trigger: 'blur' }
            ],
            content: [
                { required: true, type: 'string', message: '公告内容不能为空', trigger: 'blur' }
            ],
            type: [
                { required: true, type: 'integer', message: '公告类型不能为空', trigger: 'change' }
            ],
            status: [
                { required: true, type: 'integer', message: '发布状态不能为空', trigger: 'change' }
            ]
        }
	}
	
	export default {
		data() {
			return $data;
		},
		components: {
		},
		created() {
		},
		mounted() {
			var $this = this;
			var nid = $this.$route.query.nid;
			$data.params.nid = nid;
			if($data.params.nid != null) {
				$data.isPageLoading = true;
				$noticeService.getNotice(nid)
				.then(function(response) {
					var res = response.data;
					var code = res.rescode;
					if(code == 100) {
						var data = res.data;
						$this.params.title = data.title;
						$this.params.content = data.content;
						$this.params.type = data.type;
						if(data.type == 3) {
							$this.params.webUrl = data.ext;
						}
						//status
						$this.params.status = data.status;
					}
					$data.isPageLoading = false;
				}, function(error) {
					$data.isPageLoading = false;
				});
			}
		},
		methods: {
			handleSubmit (name) {
				var $this = this;
                this.$refs[name].validate((valid) => {
                    if (valid) {
                    		$this.isShowLoading = true;
                    		var t = $this.params;
                    		//参数
                    		var params = {
                    			nid: t.nid,
                    			title: t.title,
							type: t.type, 
							content	: t.content,
							ext:  t.webUrl, 
							status: t.status
                    		};
                    		console.log(params);
                    		// submit data to server
                    		$noticeService.edit(params)
                    		.then(function(response) {
                    			var res = response.data;
							var code = res.rescode;
							var msg = res.msg;
							if(code == 100) {
								var data = res.data;
								$this.$router.push({name: 'noticeList'});
								$this.$Message.success(msg);
							} else {
								$this.$Message.error(msg);
							}
                    			$data.isShowLoading = false;
                    		}, function(error) {
                    			console.log(error);
                    			$data.isShowLoading = false;
                    		});
                    } else {
                        this.$Message.error('表单验证失败!');
                    }
                })
            },
            handleReset (name) {
                this.$refs[name].resetFields();
            }
		}
	}
</script>

<style scoped="scoped">
	.form {
		width: 50%;
		padding: 30px 50px;
		min-width: 500px;
	}
	@keyframes ani-demo-spin {
        from { transform: rotate(0deg);}
        50%  { transform: rotate(180deg);}
        to   { transform: rotate(360deg);}
    }
    .spin-icon-load{
        animation: ani-demo-spin 1s linear infinite;
    }
</style>